<template>
<view class='component-container'>
    <view class="card-title">{{ info.title }}</view>
    <view class="card-detail">
        <view class="detail-type">{{ info.type }}</view>
        <view class="detail-specs" v-if="info.specs">{{ info.specs }}</view>
        <view class="detail-money">{{ info.money }}元</view>
    </view>
    <view class="card-madeby" v-if="info.madeBy">{{ info.madeBy }}</view>
</view>
</template>

<script>
export default {
    props:{
        info:{
            type: Object,
            default: () => ({})
        }
    }
}
</script>

<style lang='scss' scoped>
.component-container {
    background: #fff;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
    padding: 24rpx 32rpx 18rpx 32rpx;
    margin-bottom: 25rpx;
}
.card-title {
    font-size: 28rpx;
    color: #888;
}
.card-detail {
    display: flex;
    justify-content: space-between;
    font-size: 28rpx;
    color: #888;
    margin-top: 14rpx;
}
.card-madeby {
    font-size: 28rpx;
    color: #888;
    margin-top: 14rpx;
}
</style>